<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	  lang="en">
	<head>
		<meta charset="utf-8">
		<title>详情页</title>
		<link rel="stylesheet" href="/layui-v2.6.4/layui/css/layui.css" media="all">
		<script src="/js/jquery-3.5.1.min.js" charset="UTF-8"></script>
		<script src="/layui-v2.6.4/layui/layui.js" charset="utf-8"></script>
		<style>
			body {
				height: 100%;
				background: linear-gradient(90deg, #818181, #C9CACB, #C9CACB, white, white, white, white, white, white, white, white, #C9CACB, #C9CACB, #818181);
			}
		</style>
	</head>
	<body>
	<div class="div_top" th:replace="include/top"></div>
	<script type="text/javascript">
		layui.use('layer', function () {
			var layer = layui.layer;
			layer.msg("您正在试读斗破苍穹")
		})
	</script>
	<div class="layui-fluid" style="padding: 0;">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;margin-left: calc(10% - 15px)">
			<legend>热门</legend>
		</fieldset>
		<div class="layui-container">
			<ul class="flow-default layui-nav layui-row " style="background-color: white;" id="hostFiction"></ul>
		</div>
		<!-- 左导航 -->
		<div class="layui-container">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md1 layui-col-xs3">
					<div class="layui-panel">
						<ul class="layui-menu">
							<li lay-options="{id: 100}">
								<div class="layui-menu-body-title"><a onclick="shang()"><i
										class="layui-icon layui-icon-read"></i> 目录</a></div>
							</li>
							<li lay-options="{id: 101}">
								<div class="layui-menu-body-title">
									<a href="#"><a href=""><i class="layui-icon layui-icon-cellphone"></i> 手机</a></span>
									</a>
								</div>
							</li>
							<li lay-options="{id: 104}">
								<div class="layui-menu-body-title"><a id="set" href="javaScript:void(0)"><i
										class="layui-icon layui-icon-set"></i> 设置</a></div>
							</li>
							<li lay-options="{id: 106}">
								<div class="layui-menu-body-title"><a href="/toContentPage"><i
										class="layui-icon layui-icon-refresh"></i> 刷新</a></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="layui-col-md10 layui-col-xs8">
					<h1 th:text="${fiction.getFicName()}" style="text-align: center"></h1>
					<h5 th:text="'文章类型:'+${fiction.getFicType()}" style="text-align: center"></h5>
					<p style="text-align: center"
					   th:text="'发表时间:'+${fiction.getGmtCreate()}+'&nbsp;&nbsp;&nbsp;&nbsp;'+'作者:'+${fiction.getFicAuthor()}"></p>
					<p>正文:</p>
					<p style="text-align: justify" th:text="${data.getFicData()}"></p>
				</div>
				<div class="layui-col-md1 layui-col-xs5">
					<div class="layui-panel">
						<ul class="layui-menu">
							<li>
								<div class="layui-menu-body-title"><a href=""><i class="layui-icon layui-icon-gift"></i>
									打赏</a></div>
							</li>
							<li>
								<div class="layui-menu-body-title"><a href=""><i class="layui-icon layui-icon-cols"></i>
									投票</a></div>
							</li>
							<li>
								<div class="layui-menu-body-title"><span title="返回顶部"><i
										class="layui-icon layui-icon-top"></i> top</span></div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="outpage" style="display: none">
			<form id="contro" action="/toContentPage" method="get" class="layui-form">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="hidden">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">阅读主题</label>
					<div class="layui-btn layui-btn-radius layui-bg-cyan"></div>
					<div class="layui-btn layui-btn-radius layui-bg-black"></div>
					<div class="layui-btn layui-btn-radius layui-bg-blue"></div>
					<div class="layui-btn layui-btn-radius layui-bg-green"></div>
					<div class="layui-btn layui-btn-radius layui-bg-orange"></div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">正文字体</label>
					<div class="layui-input-block">
						<input class="font-style" type="radio" value="微软雅黑" title="雅黑" name="font" checked>
						<input class="font-style" type="radio" value="宋体" title="宋体" name="font">
						<input class="font-style" type="radio" value="楷体" title="楷书" name="font">
					</div>
					<!-- <div class="layui-btn layui-btn-primary"><p>雅黑</p></div>
                    <div class="layui-btn layui-btn-primary"><p>宋体</p></div>
                    <div class="layui-btn layui-btn-primary"><p>楷书</p></div> -->
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">自动订阅</label>
					<div class="layui-input-inline">
						<input type="checkbox" name="switch" value="开启" lay-skin="switch" lay-text="开启|关闭">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">夜间模式</label>
					<div class="layui-input-inline">
						<input type="checkbox" name="switch" value="on" lay-skin="switch" lay-text="on|off">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn layui-btn-lg layui-btn-primary layui-border-blue">
							<i class="layui-icon layui-icon-ok"></i> 保存
						</button>
						<button type="reset" class="layui-btn layui-btn-lg layui-btn-primary layui-border-blue">
							<i class="layui-icon layui-icon-refresh-1"></i> 重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		layui.use(['layer', 'form', "jquery"], function () {
			var
					layer = layui.layer //弹层
					, form = layui.form //表单
					, $ = layui.jquery
			$('#set').on("click", function () {
				layer.open({
					//调整弹框的大小
						area: ['500px', '380px'],
						//点击旁边地方自动关闭
						shadeClose: true,
					//动画
					anim: 2,
					//弹出层的基本类型，页面层
					type: 1,
					//刚才定义的弹窗页面
					//content: '/addNewWindowOfSettings'//路由地址
					content: $("#outpage")
				});
			});
		});

		function shang() {
			window.history.back();
		}
	</script>

	</body>
</html>
